<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <form action="###">
        <!-- 
                .lazy修饰符：
                    - 本身v-model本质是input事件(表单只要改变)就会触发
                    - 当给v-model添加.lazy修饰符后，就会把本质的input事件改为change事件(表单改变并失去焦点触发)
                
                .number修饰符
                    - 本身v-model收集输入框的内容都是字符串
                    - 如果添上.number修饰符后，就会尽量把输入的内容转为数字，类似于parseFloat(但是如果真无法转数字的话，不会转为NaN，而是被迫收集字符串了)

                .trim修饰符
                    - 收集表单数据的时候去掉前后的空格
             -->
        <p>请输入用户名：<input type="text" v-model.lazy.trim="username" /></p>
        <p>请输入年龄：<input type="text" v-model.number="age" /></p>
        <p>你是否同意该协议 <input type="checkbox" v-model="isAgree" /></p>
        <p>
          请选择你喜欢的学科(多选)
          <input type="checkbox" value="html" v-model="like" />html
          <input type="checkbox" value="css" v-model="like" />css
          <input type="checkbox" value="js" v-model="like" />js
          <input type="checkbox" value="react" v-model="like" />react
          <input type="checkbox" value="vue" v-model="like" />vue
        </p>

        <p>
          请选择你要就业的城市
          <input type="radio" value="西安" v-model="city" />西安
          <input type="radio" value="深圳" v-model="city" />深圳
          <input type="radio" value="武汉" v-model="city" />武汉
          <input type="radio" value="杭州" v-model="city" />杭州
        </p>
        <!-- 
          v-model收集下拉列表的内容
            如果下拉列表单选,则使用字符串进行收集
            如果下拉列表多选,则使用数组进行收集
         -->
        <p>
          请选择你喜欢的球队
          <select v-model="football">
            <option value="阿根廷">阿根廷</option>
            <option value="法国">法国</option>
            <option value="德国">德国</option>
            <option value="意大利">意大利</option>
            <option value="巴西">巴西</option>
            <option value="国足">国足</option>
          </select>
        </p>
        <p>
          请选择你同桌喜欢的球队
          <select v-model="footballs" multiple>
            <option value="阿根廷">阿根廷</option>
            <option value="法国">法国</option>
            <option value="德国">德国</option>
            <option value="意大利">意大利</option>
            <option value="巴西">巴西</option>
            <option value="国足">国足</option>
          </select>
        </p>
        <p>
          请发表你对国足的看法!!!
          <textarea v-model="message"></textarea>
        </p>
      </form>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            username: "laowang",
            isAgree: false,
            like: [],
            city: "",
            football: "",
            footballs: [],
            message: "退钱!!!",
            age: 0,
          };
        },
      });
    </script>
  </body>
</html>
